.anp-autohide-titlebar:not(.is-mobile) {
  --title-bar-delay: 150ms;
  --title-bar-duration: 300ms;
  --title-bar-target-translate-y: 18px;
  --title-bar-translate-y: 40px;

  .workspace-leaf-content .view-header {
    margin-top: calc(var(--title-bar-translate-y) * -1);
    position: relative;
    transition: transform var(--title-bar-duration) var(--title-bar-delay);
  }
  .workspace-leaf-content .view-header::before {
    bottom: calc(var(--title-bar-target-translate-y) * -1);
    content: '';
    left: 0;
    position: absolute;
    top: 0;
    transition: transform var(--title-bar-duration) var(--title-bar-delay);
    width: 100%;
    z-index: 0;
  }
  .workspace-leaf-content .view-header:is(:hover,:focus-within)::before {
    transform: translateY(var(--title-bar-target-translate-y));
  }
  .workspace-leaf-content .view-header:is(:hover,:focus-within),
  .workspace-leaf-content .view-header:is(:hover,:focus-within) + .view-content {
    transform: translateY(var(--title-bar-translate-y));
  }
  .workspace-leaf-content .view-content {
    transition: transform var(--title-bar-duration) var(--title-bar-delay);
  }
  .workspace-leaf-content .view-header-title {
    --file-header-font-size: var(--font-ui-medium);
  }

  /**
   * This should fix the drag/click titlebar issue.
   * 
   * Invisible boxes are not rendered (as if they were fully transparent),
   * cannot be interacted with (and behave as if they had pointer-events: none),
   * and are removed from navigation (similar to display: none).
   * 
   * @see: https://drafts.csswg.org/css-display/#visibility
   */
  .workspace-leaf-content .view-header > div {
    transition: visibility var(--title-bar-duration) var(--title-bar-delay);
    visibility: visible;
    z-index: 1;
  }
  .workspace-leaf-content .view-header:not(:hover,:focus-within) > div {
    visibility: hidden;
  }
}
